<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Superfish megamenu example with full touch support for Android, iOS and Windows 8.</title>
<link rel="stylesheet" href="../media/css/megafish.css" media="screen">
<style>
html, body, .wrap {
	width: 50em;
	height: 100%;
	padding: 0;
	margin: 0;
}
.wrap {
	padding: 1em;
	height: auto;
	min-height: 90%;
}
h1 {
	font-size: 1.125em;
}
.sf-mega ul {
	list-style-type: auto;
	margin: 0;
	padding-left: 1.2em;
}
.sf-mega li {
	margin-left: 0;
}
.sf-mega h2 {
	font-size: 1em;
	margin: .5em 0;
	color: #13a;
}
a:focus, a:hover, a:active {
	text-decoration: none;
}
</style>
<script src="../media/js/jquery.min.js"></script>
<script src="../media/js/hoverIntent.js"></script>
<script src="../media/js/superfish.js"></script>
<script>

    (function($){ //create closure so we can safely use $ as alias for jQuery

      $(document).ready(function(){
        
        var exampleOptions = {
          speed: 'fast'
        }
        // initialise plugin
        var example = $('#example').superfish(exampleOptions);

        // buttons to demonstrate Superfish's public methods
        $('.destroy').on('click', function(){
          example.superfish('destroy');
        });

        $('.init').on('click', function(){
          example.superfish(exampleOptions);
        });

        $('.open').on('click', function(){
          example.children('li:first').superfish('show');
        });

        $('.close').on('click', function(){
          example.children('li:first').superfish('hide');
        });
      });

    })(jQuery);


    </script>
</head>
<body style="">
<div class="wrap">
  <ul class="sf-menu sf-js-enabled sf-arrows" id="example">
    <li class=""> <a href="#" class="sf-with-ul">menu item 3</a>
      <div class="sf-mega" style="display: none;">
        <div class="sf-mega-section">
          <h2>list heading:</h2>
          <ul>
            <li class="current"><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
          </ul>
        </div>
        <div class="sf-mega-section">
          <h2>list heading:</h2>
          <ul>
            <li class="current"><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item that is longer</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
          </ul>
        </div>
        <div class="sf-mega-section">
          <h2>list heading:</h2>
          <ul>
            <li class="current"><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
          </ul>
        </div>
        <div class="sf-mega-section">
          <h2>list heading:</h2>
          <ul>
            <li class="current"><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li> <a href="#">menu item 4</a> </li>
  </ul>
</div>
</body>
</html>